<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>角色权限管理</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">工具箱</a></li>
    </ul>
    </div>
    
    <div class="formbody" id = "formbody">
    
    <div class="formtitle"><span ></span ></div>

        <div class="formtitle"><span></span>
            <table style="margin-left: 80px">
                <tr>
                    <td></td>
                    <td v-for = "role in rolesList">
                        <input type="radio" name="rolesId" v-model = "rolesId" v-bind:value = "role.id" @Click = "getMenuRoles(role.id)"/>
                        {{role.rolename}}</td><td><input type="button" value="修改" @click="changeMenu()" style="width: 100px;background-color: pink"/></td>
                </tr>
            </table>
        </div>
    <div v-for = "menu in menuList">
        <div class="formtitle"><span ><input type="checkbox" :value = "menu.id" v-model = "roleMenuList">{{menu.pername}}</span></div>
        <div class="toolsli">

        <b v-for = "menuInfo in menuListMap[menu.id]"><input type="checkbox" :value = "menuInfo.id" v-model = "roleMenuList">{{menuInfo.pername}}</b>

        </div>
    </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el:"#formbody",
        data:{
            rolesList:[],
            rolesId:"",
            menuList:[],
            menuListMap:null,
            roleMenuList:[]
        },
        created(){
            this.loadRoles();
            this.loadMenuInfo();
        },
        methods:{
            loadRoles:function () {
                axios.get("/rolesList").then(function (obj) {
                    if(obj.status==200){
                        var pageResult = obj.data;
                        if(pageResult.code==100){
                            alert(pageResult.msg);
                            location.href = "/login.html";
                            return;
                        }
                        vm.rolesList = pageResult.object;
                    }
                }).catch(function (error) {
                    alert("出错了"+error);
                })
            },
            loadMenuInfo:function(){
                axios.get("/initMenuInfo").then(function (obj) {
                    if(obj.status==200){
                        var pageResult = obj.data;
                        if(pageResult.code==100){
                            alert("初始化失败");
                            return;
                        }
                        var result = pageResult.object;
                        vm.menuListMap = result.menuListMap;
                        vm.menuList = result.menuList;
                    }
                }).catch(function (error) {
                    alert("出错了"+error);
                });
            },
            getMenuRoles:function (id) {
                axios.get("/roleInfoList",{params:{roleId:id}}).then(function (obj) {
                    if(obj.status==200){
                        var pageResult = obj.data;
                        if(pageResult.code==100){
                            alert(pageResult.msg);
                            return;
                        }
                        vm.roleMenuList = pageResult.object;
                    }
                }).catch(function (error) {
                    alert("查询异常"+error);
                })
            },
            changeMenu:function () {
                if(confirm("确认修改角色权限吗?")){
                    var path = "/updateMenuRole?rolesId="+vm.rolesId+"&roleMenuList="+vm.roleMenuList;
                    axios.put(path).then(function (obj) {
                        if (obj.status==200){
                            alert("修改成功");
                        }
                    }).catch(function (error) {
                        alert("出错了"+error);
                    });
                }
            }
        }
    });
</script>
</html>
